<template>
	<view class="play">
		<view class="play-content"
			:style="{ background: `linear-gradient(90deg, ${item.bgcolor[0]}, ${item.bgcolor[1]})` }"
			v-for="item in playList" :key="item.id" @tap="selectMode(item)">
			<view class="play-title self-font" :style="{textShadow: `10rpx 10rpx 0 ${item.outline}`}">{{ item.title }}
			</view>
			<text class="play-discribe">{{ item.discribe }}</text>
			<image :src='require(`../../../static/pic/${item.img}.png`)' mode="aspectFit"></image>
		</view>
		<u-popup :show="show" @close="show = false" :round="16">
			<view class="title">{{ activeRow.title }}</view>
			<view class="content">
				<u-row :gutter="12">
					<u-col span="6">
						<button class="btn-1">
							<u-icon name="plus-circle-fill" color="#fff" size="26"></u-icon>
							自定义
						</button>
					</u-col>
					<u-col span="6" @click="navigator(`${activeRow.url}?type=0`)">
						<button class="btn-2 like">
							热恋版
						</button>
					</u-col>
				</u-row>
				<u-row :gutter="12">
					<u-col span="6" @click="navigator(`${activeRow.url}?type=1`)">
						<button class="btn-2 love">
							基础版
						</button>
					</u-col>
					<u-col span="6" @click="navigator(`${activeRow.url}?type=2`)">
						<button class="btn-2 lovest">
							高阶版
						</button>
					</u-col>
				</u-row>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'play',
		data() {
			return {
				playList: [{
						id: 1,
						title: '情侣飞行棋',
						discribe: '浪漫新奇 情侣升温',
						bgcolor: ['#5e34be', '#e959f0'],
						outline: '#572edb',
						img: 'fly',
						url: '/pages/airfly/index',
						ifModes: true
					},
					{
						id: 2,
						title: '情侣大冒险',
						discribe: '就在今晚 冒险开始',
						bgcolor: ['#ef934f', '#f6c466'],
						outline: '#dc7d36',
						img: 'adventure',
						url: '/pages/airfly/index',
						ifModes: true
					},
					{
						id: 3,
						title: '情侣扫雷',
						discribe: '炸出爱的火花',
						bgcolor: ['#ec5f94', '#d87879'],
						outline: '#df4c7b',
						img: 'ray',
						url: '/pages/airfly/index',
						ifModes: true
					},
					{
						id: 4,
						title: '真心话大冒险',
						discribe: '来一场爱的冒险',
						bgcolor: ['#6277f4', '#85d9fa'],
						outline: '#5564eb',
						img: 'talk',
						url: '/pages/airfly/index',
						ifModes: true
					},
					{
						id: 5,
						title: 'Emoji大作战',
						discribe: '转出爱的Emoji',
						bgcolor: ['#e93452', '#984b77'],
						outline: '#e0324b',
						img: 'emoji',
						url: '/pages/airfly/index',
						ifModes: false
					},
				],
				show: false,
				activeRow: {}
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		methods: {
			selectMode(row) {
				this.activeRow = row
				if (row.ifModes) this.show = true
				else this.navigator(row.url)
			},
			navigator(url) {
				uni.navigateTo({
					url,
					animationDuration: 200
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.play {
		padding: 20rpx 40rpx;
		height: 100%;

		.play-content {
			width: 100%;
			height: 12vh;
			box-sizing: border-box;
			padding: 60rpx;
			border-top-left-radius: 80rpx;
			border-top-right-radius: 20rpx;
			border-bottom-right-radius: 80rpx;
			border-bottom-left-radius: 20rpx;
			position: relative;
			overflow: hidden;
			margin-bottom: 3vh;

			.play-title {
				position: absolute;
				top: 0;
				left: 5%;
				font-style: italic;
			}

			.self-font {
				font-family: "self-font";
				font-size: 60rpx;
			}

			.play-discribe {
				position: absolute;
				top: 50%;
				left: 15%;
				transform: translateY(-50%);
				font-size: 30rpx;
			}

			image {
				width: 38%;
				position: absolute;
				right: 2%;
				top: -76%;
			}
		}

		/deep/ .u-popup {
			.u-popup__content {
				min-height: 45vh;
				background-color: #23213d;
				position: relative;

				.title {
					position: absolute;
					top: -5%;
					left: 6%;
					color: #fff;
					background-color: #23213d;
					padding: 10rpx 30rpx;
					font-size: 36rpx;
					border-radius: 20rpx;
					font-weight: bold;
				}

				.content {
					padding: 50rpx 40rpx;

					.u-row {
						margin-bottom: 40rpx;

						button {
							width: 100%;
							border-radius: 30rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 20rpx;
							color: #fff;
							height: 130rpx;

							&.btn-1 {
								background-color: rgba(255, 255, 255, .2);

								.u-icon {
									margin-right: 10rpx;
								}
							}

							&.btn-2 {
								font-family: "self-font";
								font-style: italic;
								font-size: 50rpx;
								line-height: 60rpx;
								font-weight: bold;
								border-radius: 50rpx;
								border-top-right-radius: 20rpx;
								border-bottom-left-radius: 20rpx;
								background: linear-gradient(90deg, #776ff7, #ba4dfb);

								&.love {
									background: linear-gradient(90deg, #f433ea, #bd4dfb);
								}

								&.lovest {
									background: linear-gradient(90deg, #ee1f42, #d97d45);
								}
							}
						}
					}
				}
			}
		}
	}
</style>